<template>
	<view class="content">
		<music v-if="isplayingmusic" :img="curimg" @to="toPlayer()"></music>
		<!-- 头部搜索框 -->
		<view class="top">
			<view class="search" @tap="toSearch()">
				搜索歌曲
			</view>
		</view>
		<!-- 我的歌手 -->
		<view class="singers">
			<view class="title">
				<view class="text">
					我的歌手
				</view>
				<image class="icon" @tap="addBar('添加歌手')" src="../../static/image/index/add1.png" mode="">
				</image>
			</view>
			<view class="list">
				<view class="box" v-for="(item,index) in singer" :key="index" @longtap="deleteBar('歌手',index)" @tap="toSinger(item)">
					<view class="name">
						<!-- <image src="../../static/image/index/kuang.png" mode=""></image> -->
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- 我的歌单 -->
		<view class="songlist">
			<view class="title">
				<view class="text">
					我的歌单
				</view>
				<image class="icon" @tap="addBar('添加歌单')" src="../../static/image/index/add1.png" mode="">
				</image>
			</view>
			<view class="list">
				<view class="box" @tap="toLike()">
					<view class="name">
						<image src="../../static/image/index/love.png" mode=""></image>
					</view>
				</view>
				<view class="box" v-for="(item,index) in songlist" :key="index" @longtap="deleteBar('歌单',index)" @tap="toSonglist(item)">
					<view class="name">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- 热歌推荐 -->
		<view class="hotsongs">
			<view class="title">
				<view class="text">
					热歌推荐
				</view>
				<image @tap="playAll()" class="icon" src="../../static/image/index/play.png" mode="">
				</image>
			</view>
			<view class="listbox">
				<view class="listrow" v-for="(item,index) in hotsongs" :key='index'>

					<view class="name">
						<text class="num">
							{{index + 1}}
						</text>
						{{' ' + item.name}}
					</view>
					<view class="singer">
						{{' - ' + item.artists[0].name }}
					</view>
					<view class="addsong" @tap="addOne(index)">
						<image src="../../static/image/index/add.png" mode=""></image>
					</view>
					<view class="playsong" @tap="playOne(index)">
						<image src="../../static/image/index/play.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="isAvilebale">
			<view class="cancle" @tap="cancleAdd">
				<image src="../../static/image/index/error.png" mode=""></image>
			</view>
			<view class="title">
				{{ str }}
			</view>
			<input class="inputs" type="text" v-model="content" />
			<view class="enter" @tap="add(str)">
				确认
			</view>
		</view>

		<view class="card" v-if="isDelete">
			<view class="cancle" @tap="cancleAdd">
				<image src="../../static/image/index/error.png" mode=""></image>
			</view>
			<view class="title">
				{{ "是否删除" }}
			</view>
			<view class="inputs">
				{{delstr == '歌手' ? singer[delindex] : songlist[delindex]}}
			</view>
			<view class="enter" @tap="deletes()">
				确认
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import Vue from 'vue'
	export default {
		data() {
			return {
				hotsongs: [],
				isAvilebale: false,
				isDelete: false,
				str: "",
				content: "",
				singer: [],
				songlist: [],
				delstr: '',
				delindex: -1,
			}
		},
		computed: {
			...mapGetters(['curimg', 'curindex', 'audiolist', 'isplayingmusic']),
		},
		onLoad() {
			this.getHotSongs();
			this.getStorage();
		},
		methods: {
			...mapMutations(['setCurImg', 'setCurIndex', 'setAudiolist', 'setIsplayingmusic']),
			//热歌榜
			getHotSongs: function() {
				uni.request({
					url: '/api/playlist/detail',
					method: 'GET',
					data: {
						id: 3778678
					},
					header: {
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					success: (res) => {
						this.hotsongs = res.data.result.tracks;
						// console.log(this.hotsongs);
						// console.log(this.hotsongs[0].name);
						// console.log(this.hotsongs[0].artists[0].name);
					}
				});
			},

			//获取歌手和歌单缓存
			getStorage: function() {
				try {
					uni.getStorage({
						key: 'singer',
						success: (res) => {
							this.singer = res.data;
						}
					});
					uni.getStorage({
						key: 'songlist',
						success: (res) => {
							this.songlist = res.data;
						}
					});
				} catch (e) {
					uni.showToast({
						title: '获取信息失败！',
						icon: 'none',
						duration: 2000
					});
				}
			},

			//添加歌手或者歌单
			addBar: function(str) {
				this.isAvilebale = true;
				this.str = str;
			},

			//删除歌手或歌单
			deleteBar: function(str, index) {
				this.isDelete = true;
				this.delstr = str;
				this.delindex = index;
			},

			//添加到缓存中
			add: function(str) {
				if (str == '添加歌手') {
					if (this.content != '') {
						this.singer.push(this.content);
						try {
							uni.setStorageSync('singer', this.singer);
						} catch (e) {
							// console.log(e);
							uni.showToast({
								title: '添加信息失败！',
								icon: 'none',
								duration: 2000
							});
						}
						this.content = '';
						this.isAvilebale = false;
					} else {
						uni.showToast({
							title: '输入内容不能为空！',
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					if (this.content != '') {
						this.songlist.push(this.content);
						try {
							uni.setStorageSync('songlist', this.songlist);
						} catch (e) {
							uni.showToast({
								title: '添加信息失败！',
								icon: 'none',
								duration: 2000
							});
						}
						this.content = '';
						this.isAvilebale = false;
					} else {
						uni.showToast({
							title: '输入内容不能为空！',
							icon: 'none',
							duration: 2000
						});
					}
				}
			},

			//取消添加
			cancleAdd: function() {
				this.isAvilebale = false;
				this.isDelete = false;
				this.content = '';
				this.delstr = '';
				this.delindex = -1;
			},

			//删除歌手
			deletes: function() {
				if (this.delstr != '' && this.delindex != -1) {
					if (this.delstr == '歌手') {
						this.singer.splice(this.delindex, 1);
						try {
							uni.setStorageSync('singer', this.singer);
						} catch (e) {
							uni.showToast({
								title: '删除歌手失败！',
								icon: 'none',
								duration: 2000
							});
						}
						this.isDelete = false;
						this.delstr = '';
						this.delindex = -1;
					} else {
						this.songlist.splice(this.delindex, 1);
						try {
							uni.setStorageSync('songlist', this.songlist);
						} catch (e) {
							uni.showToast({
								title: '删除歌单失败！',
								icon: 'none',
								duration: 2000
							});
						}
						this.isDelete = false;
						this.delstr = '';
						this.delindex = -1;
					}
				} else {
					uni.showToast({
						title: '请重新操作！',
						icon: 'none',
						duration: 2000
					});
				}
			},

			//跳转到搜索页面
			toSearch: function() {
				uni.navigateTo({
					url: '../search/search'
				})
			},

			//跳转到播放页面
			toPlayer: function() {
				uni.navigateTo({
					url: "../player/player"
				})
			},

			//跳转到我喜欢页面
			toLike: function() {
				uni.navigateTo({
					url: '../like/like'
				})
			},

			//跳转到歌手页面
			toSinger: function(e) {
				uni.navigateTo({
					url: '../singer/singer?key=' + e
				});
			},

			//跳转到歌单页面
			toSonglist: function(e) {
				uni.navigateTo({
					url: '../songlist/songlist?key=' + e
				});
			},

			//播放一首歌
			playOne: async function(index) {
				let res = await this.geturl(this.hotsongs[index].id);
				this.setIsplayingmusic(true)
				this.setCurImg('../../static/image/test/icon.png')
				this.setCurIndex(0);
				this.hotsongs[index].url = res.data.data[0].url;
				let songinfo = {
					id: this.hotsongs[index].id,
					songname: this.hotsongs[index].name,
					artistname: this.hotsongs[index].artists[0].name,
					time: '',
					picurl: "../../static/image/test/icon.png",
					url: this.hotsongs[index].url
				}
				if (res.data.data[0].url) {
					this.setAudiolist([songinfo])
					Vue.prototype.$au_player.src = this.audiolist[this.curindex].url;
					Vue.prototype.$au_player.play();
				} else {
					uni.showToast({
						icon: 'none',
						title: '歌曲跑丢了'
					})
				};

			},

			//添加一首歌
			addOne: async function(index) {
				if(this.isInList(this.hotsongs[index].id)){
					if (this.isplayingmusic) {
						let res = await this.geturl(this.hotsongs[index].id);
						this.hotsongs[index].url = res.data.data[0].url;
						let songinfo = {
							id: this.hotsongs[index].id,
							songname: this.hotsongs[index].name,
							artistname: this.hotsongs[index].artists[0].name,
							time: '',
							picurl: "../../static/image/test/icon.png",
							url: this.hotsongs[index].url
						}
						let list = this.audiolist;
						list.push(songinfo);
						this.setAudiolist(list);
						uni.showToast({
							icon:'none',
							title:'已加入播放列表'
						})
					}else{
						this.playOne(index);
					}
				}else{
					//
				}
			},
			
			//播放所有歌曲
			playAll:async function(){
				this.playOne(0);
				this.setIsplayingmusic(true)
				this.setCurIndex(0)
				this.setCurImg('../../static/image/test/icon.png')
				let list = [];
				for(let i=1;i<this.hotsongs.length;i++){
					let res = await this.geturl(this.hotsongs[i].id);
					this.hotsongs[i].url = res.data.data[0].url;
					let songinfo = {
						id: this.hotsongs[i].id,
						songname: this.hotsongs[i].name,
						artistname: this.hotsongs[i].artists[0].name,
						time: '',
						picurl: "../../static/image/test/icon.png",
						url: this.hotsongs[i].url
					}
					list.push(songinfo);
				}
				this.setAudiolist(list)
				console.log(this.audiolist)
			},

			//获取url
			geturl: function(id) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: "https://qqyifeng.cn:9001/song/url",
						data: {
							id: id,
						},
						method: "GET",
						success: function(res) {
							// console.log(res)
							resolve(res);
						}
					});
				})
			},
			
			//是否在歌单里面
			isInList: function(id){
				for(let i=0;i<this.audiolist.length;i++){
					if(id == this.audiolist[i].id){
						uni.showToast({
							icon:'none',
							title:'歌曲已经在列表里面啦~'
						})
						return false;
					}
				}
				return true;
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100% !important;
		background: #F1F1F1;
	}

	.content {
		padding: $uni-spacing-row-sm 25rpx;
		padding-top: var(--status-bar-height);

		.top {
			padding: $uni-spacing-row-sm 0;
			border-bottom: 1rpx solid #FFFFFF;

			.search {
				border-radius: $uni-border-radius-base;
				background-color: #fff;
				line-height: 72rpx;
				font-size: $uni-font-size-lg;
				color: #999999;
				text-align: center;
			}
		}

		.singers {
			padding: $uni-spacing-row-base $uni-spacing-col-sm;
			border-bottom: 1rpx solid #C0C0C0;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				font-weight: 550;
				color: #666;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.list {
				padding-top: $uni-spacing-row-base;
				display: flex;
				align-content: flex-start;
				flex-flow: row wrap;

				.box {
					flex: 0 0 25%;
					display: flex;
					justify-content: center;
					align-items: center;

					.name {
						position: relative;
						background-color: #fff;
						width: 120rpx;
						height: 120rpx;
						line-height: 120rpx;
						text-align: center;
						margin-bottom: $uni-spacing-row-base;
						border-radius: 24rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #707070;
						box-shadow: 10rpx 10rpx 10rpx #ccc;
						overflow: hidden;

						image {
							position: absolute;
							left: 0rpx;
							height: 122rpx;
							width: 122rpx;
						}
					}
				}
			}
		}

		.songlist {
			padding: $uni-spacing-row-base $uni-spacing-col-sm;
			border-bottom: 1rpx solid #C0C0C0;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				font-weight: 550;
				color: #666;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.list {
				padding-top: $uni-spacing-row-base;
				display: flex;
				align-content: flex-start;
				flex-flow: row wrap;

				.box {
					flex: 0 0 25%;
					display: flex;
					justify-content: center;
					align-items: center;

					.name {
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						width: 120rpx;
						height: 120rpx;
						line-height: 120rpx;
						text-align: center;
						margin-bottom: $uni-spacing-row-base;
						border-radius: 24rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #707070;
						box-shadow: 10rpx 10rpx 10rpx #ccc;
						overflow: hidden;

						image {
							height: 60rpx;
							width: 60rpx;
						}
					}
				}
			}
		}

		.hotsongs {
			padding: $uni-spacing-row-base $uni-spacing-col-sm;
			bottom: env(safe-area-inset-bottom);

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				font-weight: 550;
				color: #666;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.listbox {
				margin-top: $uni-spacing-row-base;
				padding: 12rpx 24rpx;
				background-color: #fff;
				border-radius: 24rpx;

				.listrow {
					display: flex;
					height: 42rpx;
					line-height: 42rpx;
					border-bottom: 1rpx solid #C8C7CC;
					padding: $uni-spacing-row-base 0;

					.name {
						flex: 3;
						padding-left: 20rpx;
						font-size: 30rpx;
						color: #666;
						display: -webkit-box !important;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;

						.num {
							color: #C0C0C0;
							font-size: 30rpx;
						}
					}

					.singer {
						flex: 3;
						color: #C0C0C0;
						font-size: 30rpx;
						overflow: hidden;
					}

					.addsong {
						flex: 1;
						text-align: center;

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}

					.playsong {
						flex: 1;
						text-align: center;

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}

		.card {
			z-index: 99;
			background-color: #fff;
			box-shadow: 10rpx 10rpx 20rpx #ccc;
			border-radius: 24rpx;
			position: absolute;
			width: 500rpx;
			height: 300rpx;
			top: 50%;
			left: 50%;
			margin-left: -250rpx;
			margin-top: -150rpx;
			text-align: center;

			image {
				float: right;
				width: 38rpx;
				height: 38rpx;
				top: 20rpx;
				right: 20rpx;
			}

			.title {
				margin-top: 50rpx;
				font-size: 34rpx;
				font-weight: 550;
				color: #666;
			}

			.inputs {
				width: 70%;
				height: 60rpx;
				line-height: 60rpx;
				margin: 20rpx auto;
				color: #666;
				background-color: #F1F1F1;
				border-radius: 8rpx;

			}

			.enter {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin: 0 auto;
				background-color: #666;
				border-radius: 12rpx;
				color: #f1f1f1;
			}
		}
	}
</style>
